import React, {Component} from "react";
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from "react-native";
import ListView from "../components/ListView";


export default class ListViewPage extends Component {
    constructor() {
        super();
        this.state = {
            data: [],
            refreshing: false,
            loading: false
        }
    }

    componentWillMount() {
        this.setState({refreshing: true});
    }

    _onRefresh = () => {
        var temp = [];
        for (let i = 0; i < 5; i++) {
            temp.push(i);
        }
        this.setState({
            data: temp,
            refreshing: false
        });
    };
    _onLoad = () => {
        var temp = [];
        for (let i = 0; i < this.state.data.length + 5; i++) {
            temp.push(i);
        }
        this.setState({
            data: temp,
            loading: false
        });
    };
    _emptyView = () => {
        return (
                <Text
                    onPress={this._onRefresh}
                    style={{textAlignVertical: "center", textAlign: "center", fontSize: 20}}
                >
                    没有内容!
                </Text>
        )
    };
    _renderItem = (index, item) => {
        return (
            <View
                key={index}
                style={styles.test}
                activeOpacity={0.8}
                onPress={() => {
                    console.log("这是" + item);
                }}
            >
                <Text style={{flex: 1}}>这是{item}</Text>
                <Text>==={item}</Text>
            </View>
        );
    };

    render() {
        return (
            <ListView
                emptyView={this._emptyView()}
                style={{height: "96%", backgroundColor: "#0f0"}}//TODO 这里的高度是个问题
                data={this.state.data}
                isPadding={[true, true, true, true]}
                dividerHeight={10}
                renderItem={this._renderItem}
            />);
    }
}

const styles = StyleSheet.create({
    test: {
        display: "flex",
        flexDirection: "row",
        borderWidth: 2,
        borderColor: "#000",
        backgroundColor: "#ff0000"
    }
});
